<template>
    <view class="page">
        <u-navbar title="意见反馈" :back-icon-color="'#ffffff'" :title-color="'#ffffff'"
            :background="background"></u-navbar>
        <view style='height: 30rpx;'></view>
        <view class="content">
            <view class="content-title">
                <text>欢迎您提供宝贵的意见和建议</text>
            </view>
            <!-- 选择反馈类型 -->
            <view class="feedback-type">
                <view class="title">
                    <text>反馈类型</text>
                </view>
                <view class="type-list">
                    <div class="list" v-for="(item, index) in typeList" :class="{'action':TypeIndex === index}"
                        @click.stop=" onTypeTab(item,index)" :key="index">
                        <text>{{item.name}}</text>
                    </div>
                </view>
                <!-- <view class="picker">
                    <picker @change="FeedbackTypeCh" :value="TypeIndex" :range="TypeArray">
                        <view class="uni-input">{{TypeArray[TypeIndex]}}</view>
                    </picker>
                </view>
                <view class="more">
                    <text class="iconfont icon-more1"></text>
                </view> -->
            </view>
            <!-- 反馈内容 -->
            <view class="feedback-data">
                <view class="title">
                    <text>反馈内容</text>
                </view>
                <view class="content0">
                    <textarea value="" v-model='content' placeholder="请输入反馈的内容" />
                </view>
            </view>
            <!-- 联系方式 -->
            <!-- <view class="contact-way">
                <input type="text" placeholder="手机/邮箱/QQ">
            </view> -->
            <!-- 提交 -->
            <view class="btn">
                <view class="padding flex flex-direction">
                    <button @click="save()" class="cu-btn bg-blue margin-tb-sm lg">提交</button>
                </view>
            </view>
        </view>
        <view class="content-title0">
            <text>客服热线：010-63336266</text>
        </view>
        <quick-message ref="message"></quick-message>
    </view>
</template>
<script>
    import {
        getTypeLists,
        setFeedback,
    } from "@/api/my/feedback"
    export default {
        data() {
            return {
                typeList: [{
                    index: 0,
                    name: '服务态度'
                }, {
                    index: 1,
                    name: '付款流程'
                }, {
                    index: 2,
                    name: '商品劣质'
                }, {
                    index: 3,
                    name: '信息虚假'
                }, {
                    index: 4,
                    name: '信息虚假'
                }, {
                    index: 5,
                    name: '其他'
                }, ],

                // TypeArray: ['商品相关', '物流状况', '客户服务', '优惠活动', '产品体验', '产品功能', '其他问题'],
                TypeIndex: '',
                type_id: '',
                content: '',
                background: {
                    // 渐变色
                    backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
                },
            };
        },
        onLoad() {
            this.getTypeLists();
        },
        methods: {
            /**
             * 反馈类型
             * @param {Object} val
             */
            // FeedbackTypeCh(val) {
            //     console.log(val);
            //     this.TypeIndex = val.detail.value;
            // },
            /**
             * 返回点击
             */
            onBack() {
                uni.navigateBack();
            },
            showToast() {
                this.$refs.message.show({
                    msg: this.toastText,
                    type: "error",
                });
            },
            onTypeTab(item, index) {
                this.TypeIndex = index;
                this.type_id = item.id;
            },
            getTypeLists() {
                getTypeLists().then((res) => {
                    console.log(res, '9999')
                    this.typeList = res.data
                })
            },
            checkAll() {
                return new Promise((resolve, reject) => {
                    if (this.type_id == '') {
                        this.toastText = "请选择反馈类型";
                        this.showToast();
                        reject();
                    } else if (!this.content) {
                        this.toastText = "请输入反馈的内容";
                        this.showToast();
                        reject();
                    }
                    resolve();
                });
            },
            save() {
                this.checkAll().then(() => {
                    let params = {
                        type_id: this.type_id,
                        content: this.content
                    }
                    setFeedback(params).then((res) => {
                        if (res.code == 1) {
                            this.$refs.message.show({
                                msg: "保存成功",
                                type: "success"
                            })
                            setTimeout(() => {
                                uni.navigateBack({
                                    url: '/pages/my/my'
                                })
                            }, 1000)
                        }
                    }).catch(() => {})
                }).catch(() => {})
            }
        }
    }
</script>

<style scoped lang="scss">
    .page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;
    }

    .content {
        background: #ffffff;
    }

    .content-title {
        display: flex;
        padding: 30rpx 0;
        margin: 0 30rpx;
        text-align: center;
        justify-content: center;
        color: #ea5504;
        border-bottom: 1rpx solid #efefef;
    }

    .content-title0 {
        display: flex;
        padding: 30rpx 0;
        margin: 0 30rpx;
        text-align: center;
        justify-content: center;
        color: #ea5504;
    }

    /* 反馈类型 */
    .feedback-type {
        padding: 30rpx 30rpx 0 30rpx;

        .title {
            display: flex;
            align-items: center;
            padding-left: 20rpx;
            border-left: 9rpx solid #339983;

            text {
                font-size: 32rpx;
                color: #717171;
            }
        }

        .type-list {
            padding: 30rpx;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            // justify-content: center;
            flex-wrap: wrap;
            width: 100%;

            .list {
                display: flex;
                justify-content: center;
                // width: 27%;
                text-align: center;
                padding: 15rpx 25rpx;
                background-color: #eeeeee;
                border-radius: 100rpx;
                margin: 15rpx;
                margin-bottom: 30rpx;
                box-sizing: border-box;

                text {
                    font-size: 26rpx;
                    color: #222222;
                }
            }

            .action {
                background-color: $base;
                border: 2rpx solid $base;
                box-sizing: border-box;

                text {
                    color: #ffffff;
                }
            }
        }

        // .picker {
        //     position: absolute;
        //     width: 100%;
        //     height: 100%;
        //     opacity: 0;
        // }

        // .more {
        //     display: flex;
        //     align-items: center;

        //     text {
        //         color: #222222;
        //         font-size: 34rpx;
        //     }
        // }
    }

    /* 反馈内容 */
    .feedback-data {
        padding: 0 30rpx 0 30rpx;

        .title {
            display: flex;
            align-items: center;
            padding-left: 20rpx;
            border-left: 9rpx solid #339983;

            text {
                font-size: 32rpx;
                color: #717171;
            }
        }

        .content0 {
            padding: 30rpx 0;

            textarea {
                width: 100%;
                height: 320rpx;
                background-color: #f6f6f6;
                border-radius: 20rpx;
                padding: 20rpx;
                font-size: 26rpx;
                color: #222222;
            }
        }

        .voucher-img {
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            height: 240rpx;
            margin-top: 20rpx;

            .list {
                width: 33%;
                height: 100%;

                image {
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 10rpx;
                }
            }
        }
    }

    /* 联系方式 */
    .contact-way {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 94%;
        height: 100rpx;
        margin: 20rpx auto;
        background-color: #ffffff;
        border-radius: 20rpx;

        input {
            width: 100%;
            height: 100%;
            padding: 0 4%;
            font-size: 26rpx;
            color: #222222;
        }
    }

    /* 提交 */
    .btn {
        button {
            background-image: linear-gradient(0deg, #4199b2 0%, #2d996b 100%),
                linear-gradient(#ff6a00, #ff6a00);
            background-blend-mode: normal, normal;
        }
    }
</style>